<template>
  <el-card>
    <div class="head">
      <el-button type="success" size="mini" icon="el-icon-edit" @click="add">
        添加菜单
      </el-button>
    </div>
    <el-table
      style="width: 100%"
      :data="list"
      :header-cell-style="{ background: '#FAFAFA' }"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'childs' }"
    >
      <el-table-column label="标题" width="180px" prop="title">
      </el-table-column>
      <el-table-column label="权限点代码" prop="code"></el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template #default="{row}">
          <el-button
            type="primary"
            round
            icon="el-icon-edit"
            plain
            circle
            @click="save(row)"
          ></el-button>
          <el-button
            type="danger"
            round
            icon="el-icon-delete"
            plain
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" :model="list">
      <el-form :rules="rules">
        <el-form-item label="权限组名称" label-width="110px">
          <el-radio-group>
            <el-radio label="菜单"></el-radio>
            <el-radio label="权限点"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称" label-width="110px">
          <!-- <el-select>
            <el-option></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="权限代码" label-width="100px" prop="code">
          <el-input style="width: 300px" v-model="list.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" label-width="100px" prop="title">
          <el-input style="width: 300px" v-model="list.title"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import { list,update } from "@/api/base/menus";
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      title: "",
      rules: {
        title: [
          { required: true, message: "权限标题不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "权限代码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.menuList();
  },
  methods: {
    async menuList() {
      const res = await list();
      console.log(res);
      this.list = res.data;
    },
    add() {
      this.title = "创建菜单";
      this.dialogVisible = true;
    },
   async save(data){
      console.log(data);
      // const res = await update(data)
      // console.log(res);
      this.title = "创建菜单";
      this.dialogVisible = true;
    }
  },
};
</script>

<style scoped lang="scss">
.head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
}
</style>
